Thomas Joos | mobile application developer

(re)create your thoughts and expand your limits.

Flash actionscript 3: proportional image resizing

with 24 comments

There is always a moment in a flash developer’s life where he want’s to resize images. For example to create a thumbnail, or just a resized image for your image gallery.

the point is you’d like to resize your images proportional of course, so you won’t get a crappy result. It’s no biggie but I wrote a class in as3 wich resizes the bitmap you like and returns the result.

-UPDATED-

you can download the class HERE. and here’s an example of how you could use it

I’ll explain how you can use the class:

Let’s say you have a few images in a container and you’d like them all to fit in a bounding box with a maximum width and height , 100 px for example. Of course you’d like to resize them proportional. You can use the static class ResizeImage and just make a call to the resizeIt function. Just make sure to assign a few parameters.
ResizeImage.resizeIt(obj,100,100);

Just assign the object you’d like to resize, and give a value for the maximum width and height. The class will resize your object, and in stead of returning another bitmap, your object is resized directly!

For those who are interested here is some explanation about how the class handles the proportional resizing:

first we calculate our ratio, to make sure we can recalculate the width and height proportional

var r:Number;//ratio
r = b.height/b.width;//calculation ratio

With a simple if loop we check if the width of the image is bigger than the max width you want, if so then we set the width to the max value and recalculate the height proportional

if (b.width>maxW) {
b.width = maxW;
b.height = Math.round(b.width*r);
}

After the height is updated we check if this is bigger than the max height you want, if so then we set the height to the max value and recalculate the width proportional.
if (b.height>maxH) {
b.height = maxH;
b.width = Math.round(b.height/r);
}

Written by vilebody

November 7, 2007 at 12:13 am

Posted in as3

24 Responses

Subscribe to comments with RSS.

  1. hi, :)

    just a quick reply, i see there is no need to stock data into the object and if you only use 1 method, why not make it static ?

    cheers

    avalanched

    November 10, 2007 at 3:39 am

  2. hi avalanched,
    My guess is that if you make a class static you are not obligated to make an instance of it? so you should just basically use its function where you need to..

    I have never used a class in that way actually but it seems quite handy in this case. Please feel free to update the class if you think it improves the functionality. I’ll have a look at it myself when I have some time.

    grtz

    vilebody

    November 11, 2007 at 11:23 pm

  3. hi there,
    Nice peace of code, but how do you show the resized image on the screen?

    something like this?
    //call to resize function
    var bigImageResized:Bitmap=test.resizeImage(image,80,80);
    //set the resized image into an image to show it on screen.
    testimage.source=bigImageResized;

    When i do this with an image of 160×160 and i resize it to 80×80..
    the image is resized correctly in the function, but when i try to show it on screen.. the image is showed 160×160 :(

    I want to use this function to reduce the size of an image before i save it into a database..

    when i saw this happend i’m not sure the image is really smaller.. or does the function the same as just setting the image dimensions hard in code like this.

    testimage.source=”myimage.png”;
    testimage.width=80;
    testimage.height=80;

    Some help please..
    Greets, jacob

    jacob

    February 25, 2008 at 11:43 am

  4. hey jacob,

    the function does not resize the kb size of the bitmap but just his width and height hard coded.

    My guess is that when you use the resized image and put it in the source property of your testImage, the testImage props are 160×160 and maybe that’s why it stays large?

    grtz

    vilebody

    February 29, 2008 at 12:48 pm

  5. thanx for the answer,
    I didn’t set the props of testimage, I have originalimage on the screen wich is 160×160, click on a button and run it trough the function. After that i try to put the resized image on the screen (testimage)

    could you be so kind to show an example in wich the smaller image is shown?

    thanx in advance, greetz, jacob

    jacob

    March 4, 2008 at 5:12 pm

  6. @jacob: i will put an example file online asap!

    vilebody

    March 5, 2008 at 12:28 pm

  7. @avalanched:

    I finally found the time to update the class, it is static now and does not return an object but just resizes the one you want directly.

    not bad, an 8 month delay :)

    @jacob: try using the updated class and your object will be resized directly, Let me know if you still have this problem after trying the updated version

    Thomas

    vilebody

    May 4, 2008 at 4:37 pm

  8. […] you want some more info you can check my previous post. You will find some more explanation about the […]

  9. I think this is on the right track if you are only interested in image diaplay.

    However, if you truly want to resize the image so that maybe, you could send it to your server or something (as posted by somebody above):

    You could create a matrix and draw it to a bitmapdata thats to the right scale.

    something like this: I’m fixing to test it soon…

    var bitmapData:BitmapData;
    var bitmap:Bitmap = new Bitmap();
    bitmapData = ResizeImage.resizeIt(origionalBM or MC,maxw,maxh);
    bitmap.bitmapData = bitmapData;
    addChild(bitmap);

    package {
    import flash.display.*;
    import flash.geom.Matrix;

    public class ResizeImage extends Sprite {
    public static function resizeIt(b:*, maxH:int,maxW:int):BitmapData {
    var thisWidth:int = Math.round(b.width);
    var thisHeight:int = Math.round(b.height);
    var r:Number;//ratio
    r = thisWidth / thisHeight;//calculation ratio to which resize takes place

    if(thisWidth > maxW) {
    thisWidth = maxW;
    thisWidth = Math.round(thisWidth * r);

    }
    if(thisHeight > maxH) {
    thisHeight = maxH;
    thisWidth = Math.round(thisHeight/r);

    }

    var bd:BitmapData = new BitmapData(thisWidth,thisHeight,true,0x00FFFFFF); // transparent, in case your image is…
    var matrix:Matrix = new Matrix();
    matrix.sx = thisWidth / b.width;
    matrix.sy = thisHeight / b.height;
    bd.draw(b,matrix);

    return bd;
    }

    }
    }

    after this you could use the adobe as3corelib jpg or png class so you could send it server way….

    Tim

    May 16, 2008 at 8:02 pm

  10. hey tim,

    that’s very cool feedback dude! Feel free to test it out and fine tune your idea, I think it’s great. If you update the class with your code implemented just mail it to me and include a working example and I will blog about it. With credits to you of course!

    Hope to hear from you soon :)

    grtz Thomas

    vilebody

    May 16, 2008 at 9:06 pm

  11. Awesome stuff, tim!
    I’d really like to use this in a project i’m working on, but I suck at flash. Could someone post a working example of this? The functionality I’m looking for is to resize an image and save it to disk, or at least grab a hold of the image data so I can send it to a server or something.

    Thanks in advance.

    kelso.b

    May 22, 2008 at 11:49 pm

  12. tnx a lot, helps me much i’ve looked to code to resize image in JS and it is almost the same.
    little changes in var declaration and it’s worked :)


    var r = b.height/b.width;

    instead

    var r:Number;
    r = b.height/b.width;

    liran

    May 29, 2008 at 12:05 pm

  13. The download doesn’t work at the moment!

  14. hi there,

    I tested the url but it seems to work here. Are there others who can not download the class?

    vilebody

    June 17, 2008 at 6:51 am

  15. Good article

    Babatunde Adeyemi

    June 22, 2008 at 5:47 pm

  16. yes even i cant download

    ortist

    July 11, 2008 at 11:35 pm

  17. 1120: Access of undefined property matrix.

    matrix.sx = thisWidth / b.width;
    matrix.sy = thisHeight / b.height;
    bd.draw(b,matrix);

    Dany

    September 14, 2008 at 12:58 am

  18. Easiest and accurate way to resize image proportionately.

    img_mc._height = 100;// set height as per container.
    img_mc._xscale = img_mc._yscale; // This will resize image proportionately.

    http://jasmeetsingh.wordpress.com/2008/05/06/image-componet-to-load-swf-images-and-resize/

    jasmeetsehgal

    October 1, 2008 at 11:40 am

  19. Thanks for share this code you save my day (LOL a lot of days). I just added your code to some cool image apps named DispalyShelf and is working perfect.
    http://www.quietlyscheming.com/blog/components/tutorial-displayshelf-component/

    Thanks

    Aleori

    November 3, 2008 at 11:39 pm

    • Hey Aleori,

      Can you please help me in sorting out the resize issues with the displayshelf component, I am also trying to do something similar, but till now I have not been able to sort it out…Help me please…

      Thanks,
      Vicky

      Vicky

      May 1, 2009 at 10:01 pm

  20. but how to import and use this class on a document class?
    I got diffeculties to integrate em!

    thanx

    Abdessamad

    December 17, 2008 at 9:40 am

  21. Any one can tell me wha’t the wrong with this code:

    var img:Array = new Array(‘image1.jpg’,’image2.jpg’,’image3.jpg’,’image4.jpg’,’image5.jpg’);
    for (var i=0; i<img.length; i++) {
    var imgLoader:Loader = new Loader();
    imgLoader.load(new URLRequest(“http://flashduniya.com/images/”+img[i]));
    imgLoader.y = i*80;
    addChild(imgLoader);
    imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaded);
    }
    function imgLoaded(e:Event) {
    e.target.content.width = e.target.content.height = 75 ;
    }

    While I execute this code, It’s working fine. But while I upload the swf file on any server then images width and height are not fixing.
    Can you please tell me what’s the problem?

    Thanks in Advance,
    Flash Duniya

    Flash Duniya

    February 11, 2009 at 2:03 pm

  22. I’m trying to use this class to resized an image when the browser is resized so that it will take up most of the screen….. the resizing only seems to be working when its resizing smaller but not bigger. Any thoughts?

    stage.addEventListener(Event.RESIZE, resizeImage);

    private function resizeImage(evt:Event):void
    {
    sw = stage.stageWidth;
    sh = stage.stageHeight;

    imgHolder.x = sw/2;
    imgHolder.y = sh/2;

    ResizeImage.resizeIt(imgHolder, sh, sw);
    }

    Max

    May 6, 2009 at 8:38 pm

  23. broken link to the source

    antonio brandao

    July 14, 2009 at 2:14 pm


Leave a comment